import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
import 'inter-ui'
import React, { StrictMode } from 'react'
// import { isMobile } from 'react-device-detect'
import ReactDOM from 'react-dom'
// import ReactGA from 'react-ga'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import Blocklist from './components/Blocklist'
import { NetworkContextName } from './constants'
import './i18n'
import App from './pages/App'
import store from './state'
import ApplicationUpdater from './state/application/updater'
import ListsUpdater from './state/lists/updater'
import MulticallUpdater from './state/multicall/updater'
import TransactionUpdater from './state/transactions/updater'
import UserUpdater from './state/user/updater'
import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
import getLibrary from './utils/getLibrary'

// var Vconsole = require('vconsole')
// new Vconsole()

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)

console.log('======>1', window.ethereum)

if ('ethereum' in window) {
  ; (window.ethereum as any).autoRefreshOnNetworkChange = false
}

// const GOOGLE_ANALYTICS_ID: string | undefined = process.env.REACT_APP_GOOGLE_ANALYTICS_ID
// if (typeof GOOGLE_ANALYTICS_ID === 'string') {
//   ReactGA.initialize(GOOGLE_ANALYTICS_ID)
//   ReactGA.set({
//     customBrowserType: !isMobile ? 'desktop' : 'web3' in window || 'ethereum' in window ? 'mobileWeb3' : 'mobileRegular'
//   })
// } else {
//   ReactGA.initialize('test', { testMode: true, debug: true })
// }

// window.addEventListener('error', error => {
//   ReactGA.exception({
//     description: `${error.message} @ ${error.filename}:${error.lineno}:${error.colno}`,
//     fatal: true
//   })
// })

function Updaters() {
  return (
    <>
      {/* 代币列表更新管理 */}
      <ListsUpdater />
      {/* 用户一些简单设置的管理 */}
      <UserUpdater />
      {/* 应用的谈框，消息，对话框等的管理 */}
      <ApplicationUpdater />
      {/* 智能合约交易的管理 */}
      <TransactionUpdater />
      {/* 批量智能合约查询的管理 */}
      <MulticallUpdater />
    </>
  )
}

ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    {/*  区块网络提供器   */}
    <Web3ReactProvider getLibrary={getLibrary}>
      {/*   网络连接器   */}
      <Web3ProviderNetwork getLibrary={getLibrary}>
        {/*   黑名单，用于禁止某些地址使用uniswap,黑名单在 constants/index.ts的变量BLOCKED_ADDRESSES中   */}
        <Blocklist>
          {/*   redux 的 store   */}
          <Provider store={store}>
            {/*   状态更新器   */}
            <Updaters />

            {/* 以下是普通app的具体内容，包括主题，主题样式，hash路由及APP */}
            <ThemeProvider>
              <ThemedGlobalStyle />
              <HashRouter>
                <App />
              </HashRouter>
            </ThemeProvider>

          </Provider>
        </Blocklist>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
